<script setup lang="ts">
import {
  getDefaultSearchKeyWord,
  getHotSearch,
  getSearchSuggest,
} from "@/apis/search/search";
import router from "@/router";
import type {
  Album,
  Artist,
  getSearchSuggestRes,
  getSearchSuggestResult,
  hotSearchWordData,
  Playlist,
  Song,
} from "@/types/search";
import { Search } from "@element-plus/icons-vue";
import { onBeforeMount, ref, watch } from "vue";
const searchContent = ref("");
const defaultKeyWord = ref("");
const hotSearchWordArr = ref<hotSearchWordData[]>([]);
const userIsInput = ref(false);
onBeforeMount(async () => {
  const res = await getDefaultSearchKeyWord();
  //   console.log(res);
  defaultKeyWord.value = res.data.data.showKeyword;
});
const showHotSearch = async () => {
  const res = await getHotSearch();
  hotSearchWordArr.value = res.data.data;
};
const searchSuggestResult = ref<getSearchSuggestResult>();
watch(searchContent, async (newVal) => {
  // console.log(newVal);
  if (newVal === "") {
    userIsInput.value = false;
    return;
  }
  userIsInput.value = true;
  const res = await getSearchSuggest({ keywords: newVal });
  searchSuggestResult.value = res.data.result;
});
const searchSuggestType = (item: string) => {
  if (item === "songs") {
    return "歌曲";
  } else if (item === "artists") {
    return "歌手";
  } else if (item === "albums") {
    return "专辑";
  } else {
    return "播放列表";
  }
};
</script>
<template>
  <div class="SearchCard">
    <el-card style="max-width: 100%">
      <template #header>
        <el-tooltip placement="bottom" trigger="click" effect="light">
          <template #content>
            <ul class="searchResultList" v-if="!userIsInput">
              <li
                v-for="item in hotSearchWordArr"
                @click="searchContent = item.searchWord"
              >
                <img :src="item.iconUrl" alt="" />{{ item.searchWord }}
              </li>
            </ul>
            <ul class="searchSuggestions" v-if="userIsInput">
              <li v-for="item in searchSuggestResult?.order">
                {{ searchSuggestType(item) }}
                <hr />
                <p
                  v-if="searchSuggestType(item) === '歌手'"
                  v-for="artist in searchSuggestResult?.artists"
                  @click="
                    router.push({ path: '/Artist', query: { id: artist.id } })
                  "
                >
                  <img :src="artist.picUrl" alt="" />
                  {{ artist.name }}
                </p>
                <p
                  v-if="searchSuggestType(item) === '歌曲'"
                  v-for="song in searchSuggestResult?.songs"
                >
                  {{ song.name }} -- {{ song.artists[0].name }}
                </p>
                <p
                  v-if="searchSuggestType(item) === '专辑'"
                  v-for="album in searchSuggestResult?.albums"
                >
                  {{ album.name }}
                </p>
                <p
                  v-if="searchSuggestType(item) === '播放列表'"
                  v-for="Playlist in searchSuggestResult?.playlists"
                  @click="
                    router.push({
                      path: '/MusicList',
                      query: { id: Playlist.id },
                    })
                  "
                >
                  <img :src="Playlist.coverImgUrl" alt="" />
                  {{ Playlist.name }}
                </p>
              </li>
            </ul>
          </template>
          <el-input
            v-model="searchContent"
            style="max-width: 600px"
            :placeholder="defaultKeyWord"
            class="input-with-select"
            @focus="showHotSearch"
          >
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </el-tooltip>
      </template>
      <div class="dailyRecommend"></div>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.searchResultList {
  width: 500px;
  font-size: 20px;
  box-sizing: border-box;
  //   padding:;
  max-height: 400px;
  overflow-y: scroll;
  li {
    margin-top: 5px;
    height: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    img {
      width: 15px;
    }
  }
  li:hover {
    background-color: #ccc;
  }
}
.searchSuggestions {
  width: 500px;
  font-size: 20px;
  box-sizing: border-box;
  //   padding:;
  max-height: 400px;
  overflow-y: scroll;
  li {
    margin-top: 5px;
    height: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    p {
      // text-align: 10px;
      text-indent: 1em;
      border-bottom: 1px solid #ccc;
      line-height: 40px;
      padding: 5px 0;
      img {
        width: 40px;
        border-radius: 50%;
        height: 40px;
        vertical-align: middle;
      }
    }
    p:hover {
      background-color: #2cf5cd;
      cursor: pointer;
    }
  }
}
.searchSuggestions::-webkit-scrollbar {
  display: none;
}
.searchResultList::-webkit-scrollbar {
  display: none;
}
</style>
